<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="尊耀汇年会">
    <meta name="keywords" content="尊耀汇年会">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>我的卡片</title>

    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">

    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <link rel="icon" type="image/png" href="img/card/favicon.png">

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" sizes="192x192" href="img/card/favicon.png">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="apple-touch-icon-precomposed" href="img/card/favicon.png">

    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileImage" content="img/card/favicon.png">
    <meta name="msapplication-TileColor" content="#0e90d2">

    <link rel="stylesheet" href="assets/css/amazeui.min.css">
    <link rel="stylesheet" href="assets/css/app.css">
    <style>
        /*初始化样式*/
        td,
        li,
        input,
        textarea,
        select,
        button {
            margin: 0;
            font-size: 13px;
            color: #555;
            padding: 0;
            font-family: "Microsoft Yahei", "Lucida Grande", Verdana, Lucida, Helvetica, Arial, 'Simsun', sans-serif;
        }
        ul {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        li {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        ol,
        ul,
        li {
            list-style-image: none;
            list-style-position: outside;
            list-style-type: none;
        }
        img {
            border: 0;
        }
        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-size: 14px;
            padding: 0;
            margin: 0;
        }
        a {
            text-decoration: none;
            color: #555;
        }
        a:hover {
            color: #EE4F00;
        }
        /*html {
            overflow: -moz-scrollbars-vertical;
            height: 100%;
            width: 100%;
        }*/
        td {
            margin-left: 5px;
        }
        form,
        fieldset,
        legend,
        input,
        button,
        textarea,
        blockquote {
            margin: 0;
            padding: 0;
            font-size: 12px;
        }
        dt,
        dd,
        dl {
            padding: 0;
            margin: 0;
        }
        /*后定义样式*/
        body {
            background: linear-gradient(#d13d4b, #8b2537);
        }
        .card-ani {
            position: absolute;
        }
        .card-txt {
            position: absolute;
        }
        a:visited {
            color: #ffffff;
        }
        a:hover {
            color: #ffffff;
        }
        /*@font-face {
            font-family:"南宋书局体";src:url('fonts/南宋书局体.ttf');
        }*/
        @media (min-width: 769px) {
            body {
                height: 1955px;
                /*height: 2955px;*/
                background: linear-gradient(#d13d4b, #8b2537);/*原设计颜色*/
                position: relative;
            }
        }
        .clickable {
            cursor: pointer;
        }
    </style>
</head>
<body class="card-resize" style="position:relative;height:480px">
<!--模态框-->
<a class="card-txt card-resize clickable" style="top: 14px;right: 22px;color: #ffffff;"
   data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 1}">兑换</a>
<div class="am-modal" id="doc-modal-1">
    <div class="am-modal-dialog" style="width:285px;height:314px;">
        <img src="img/card/erweima.png" style="width:100%;">
    </div>
</div>
<!--<a id="card-QRCode" class="card-txt card-resize" style="top: 14px;right: 22px;color: #ffffff;">兑换</a>-->
<!--<div class="am-modal" id="doc-modal-1">
    <div class="am-modal-dialog" style="width:285px;height:314px;">
        <img src="img/card/erweima.png" style="width:100%;">
    </div>
</div>-->

<img src="img/card/denglong_l.png" alt="" class="card-ani card-resize" style="width:128px;height:115px;top:48px;left:0;">
<img src="img/card/denglong_r.png" alt="" class="card-ani card-resize" style="width:99px;height:74px;top:87px;right:0;">
<img src="img/card/yanhua_big.png" alt="" class="card-ani card-resize" style="width:26px;top:43px;right:80px;">
<img src="img/card/yanhua_small.png" alt="" class="card-ani card-resize" style="width:20px;top:73px;left:144px;">
<img src="img/card/hongbao.png" alt="" class="card-ani card-resize" style="width:250px;height:188px;top:94px;left:32px;">
<div class="card-ani card-resize" style="width:72px;height:58px;top:110px;left:125px">
    <div class="card-txt card-resize">
        <p style="font-size:18px;color:#c90d0d;line-height:10px;">金犬贺岁</p>
        <p style="font-size:18px;color:#c90d0d;line-height:10px;">恭喜发财</p>
    </div>
</div>
<img src="img/card/yuncai.png" alt="" class="card-ani card-resize" style="width:128px;height:31px;top:256px;right:0;">
<img src="img/card/line_top.png" alt="" class="card-ani card-resize" style="width:316px;bottom:168px;left:0;right:0;margin:0 auto;">
<img src="img/card/line_bottom.png" alt="" class="card-ani card-resize" style="width:316px;bottom:62px;left:0;right:0;margin:0 auto;">

<img src="img/card/zun.png" alt="" class="card-ani card-resize" style="width:58px;left:18px;bottom:101px;">
<p class="card-ani card-resize" style="font-size:16px;letter-spacing:0px;color:#ffc42b;width:50px;left:31px;
bottom:56px;">尊×<span class="card-num-zun" style="margin-left:0px">0</span></p>

<img src="img/card/yao.png" alt="" class="card-ani card-resize" style="width:58px;left:92px;bottom:101px;">
<p class="card-ani card-resize" style="font-size:16px;letter-spacing:0px;color:#ffc42b;width:50px;left:105px;
bottom:56px;">耀×<span class="card-num-yao" style="margin-left:0px">0</span></p>

<img src="img/card/ding.png" alt="" class="card-ani card-resize" style="width:58px;left:165px;bottom:101px;">
<p class="card-ani card-resize" style="font-size:16px;letter-spacing:0px;color:#ffc42b;width:50px;left:178px;
bottom:56px;">鼎×<span class="card-num-ding" style="margin-left:0px">0</span></p>

<img src="img/card/shang.png" alt="" class="card-ani card-resize" style="width:58px;left:239px;bottom:101px;">
<p class="card-ani card-resize" style="font-size:16px;letter-spacing:0px;color:#ffc42b;width:50px;left:252px;
bottom:56px;">尚×<span class="card-num-shang" style="margin-left:0px">0</span></p>

<img src="img/card/bg_house.png" alt="" class="card-ani card-resize" style="width:320px;height:70px;bottom:0;">



<!--[if (gte IE 9)|!(IE)]><!-->
<script src="js/jquery-3.2.1.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<!--低版本jQuery备用链接-->
<!--<script src="http://code.jquery.com/jquery-1.12.4.min.js"
        integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>-->
<script src="assets/js/amazeui.min.js"></script>
<script src="js/quping.js"></script>
<script>
    var evt = "onorientationchange" in window ? "orientationchange" : "resize";
    window.addEventListener(evt, function() {
        setTimeout(window.location.reload(true),800)
    }, false);

    /*不同尺寸屏幕手机样式适配*/
    scaleW = window.innerWidth/320;
    scaleH = window.innerHeight/480;
    var resizes = document.querySelectorAll('.card-resize');
    for (var j=0; j<resizes.length; j++) {
        if (window.innerWidth < 768){
            /*横屏样式*/
            if(window.innerWidth > window.innerHeight){
                if(resizes[j].style.width === '320px'){
                    resizes[j].style.width = parseInt(resizes[j].style.width)*scaleH*1.57 + 'px';
                }else{
                    resizes[j].style.width = parseInt(resizes[j].style.width)*scaleH + 'px';
                }
                resizes[j].style.height = parseInt(resizes[j].style.height)*scaleW + 'px';

                if(resizes[j].style.top === '110px'){
                    resizes[j].style.top = parseInt(resizes[j].style.top)*scaleW*1.15 + 'px';
                }else{
                    resizes[j].style.top = parseInt(resizes[j].style.top)*scaleW + 'px';
                }

                if(resizes[j].style.bottom === '56px'){
                    resizes[j].style.bottom = parseInt(resizes[j].style.bottom)*scaleW*1.1 + 'px';
                }else{
                    resizes[j].style.bottom = parseInt(resizes[j].style.bottom)*scaleW + 'px';
                }

                if(resizes[j].style.left === '32px'){
                    resizes[j].style.left = parseInt(resizes[j].style.left)*scaleW*1.2 + 'px';
                }else if(resizes[j].style.left === '125px'){
                    resizes[j].style.left = parseInt(resizes[j].style.left)*scaleH*1.48 + 'px';
                }else if(resizes[j].style.left === '18px'||resizes[j].style.left === '92px'||
                        resizes[j].style.left === '165px'||resizes[j].style.left === '239px'||
                        resizes[j].style.left === '31px'||resizes[j].style.left === '105px'||
                        resizes[j].style.left === '178px'||resizes[j].style.left === '252px'){
                    resizes[j].style.left = parseInt(resizes[j].style.left)*scaleH*1.2 + 40 + 'px';
                }else{
                    resizes[j].style.left = parseInt(resizes[j].style.left)*scaleH*1.4 + 'px';
                }

                resizes[j].style.right = parseInt(resizes[j].style.right)*scaleH + 'px';
                resizes[j].style.lineHeight = parseInt(resizes[j].style.lineHeight)*scaleW + 'px';
                resizes[j].style.fontSize = parseInt(resizes[j].style.fontSize)*scaleH + 'px';
            }
            /*竖屏样式*/
            resizes[j].style.width = parseInt(resizes[j].style.width)*scaleW + 'px';
            resizes[j].style.height = parseInt(resizes[j].style.height)*scaleH + 'px';
            resizes[j].style.top = parseInt(resizes[j].style.top)*scaleH + 'px';
            /*if(resizes[j].style.bottom === '66px'){
                resizes[j].style.bottom = parseInt(resizes[j].style.bottom)*scaleH + 'px';
            }*/
            if(resizes[j].style.bottom === '56px'){
                resizes[j].style.bottom = parseInt(resizes[j].style.bottom)*scaleH*1.1 + 'px';
            }else{
                resizes[j].style.bottom = parseInt(resizes[j].style.bottom)*scaleH + 'px';
            }
            resizes[j].style.left = parseInt(resizes[j].style.left)*scaleW + 'px';
            resizes[j].style.right = parseInt(resizes[j].style.right)*scaleW + 'px';
            resizes[j].style.lineHeight = parseInt(resizes[j].style.lineHeight)*scaleH + 'px';
            resizes[j].style.fontSize = parseInt(resizes[j].style.fontSize)*scaleW*1 + 'px';
        }else{
            /*PC端样式*/
            resizes[j].style.width = parseInt(resizes[j].style.width)*scaleW + 'px';
            resizes[j].style.height = parseInt(resizes[j].style.height)*scaleW + 'px';
            if(resizes[j].style.top === '110px'){
                resizes[j].style.top = parseInt(resizes[j].style.top)*scaleW*1.1 + 'px';
            }else{
                resizes[j].style.top = parseInt(resizes[j].style.top)*scaleW + 'px';
            }
            if(resizes[j].style.bottom === '56px'){
                resizes[j].style.bottom = parseInt(resizes[j].style.bottom)*scaleW*1.2 + 'px';
            }else{
                resizes[j].style.bottom = parseInt(resizes[j].style.bottom)*scaleW + 'px';
            }
            resizes[j].style.left = parseInt(resizes[j].style.left)*scaleW + 'px';
            resizes[j].style.right = parseInt(resizes[j].style.right)*scaleW + 'px';
            resizes[j].style.lineHeight = parseInt(resizes[j].style.lineHeight)*scaleH + 'px';
            resizes[j].style.fontSize = parseInt(resizes[j].style.fontSize)*scaleW + 'px';
        }

        /*resizes[j].style.marginTop = parseInt(resizes[j].style.marginTop)*scaleH + 'px';
        resizes[j].style.marginBottom = parseInt(resizes[j].style.marginBottom)*scaleH + 'px';
        resizes[j].style.marginLeft = parseInt(resizes[j].style.marginLeft)*scaleW + 'px';
        resizes[j].style.marginRight = parseInt(resizes[j].style.marginRight)*scaleW + 'px';*/
    }
    /*不同尺寸屏幕手机字体大小适配*/
    var scales = document.querySelectorAll('.card-txt');
    for (var i=0; i<scales.length; i++) {
        var ss = scales[i].style;
        /*横屏*/
        if(window.innerWidth > window.innerHeight){
            console.log('横屏');
                ss.webkitTransform =
                    ss.MsTransform =
                        ss.msTransform =
                            ss.MozTransform =
                                ss.OTransform =
                                    ss.transform=
                                        'translateX('+scales[i].offsetWidth*(scaleW-1)/2+'px)' +
                                        'translateY('+scales[i].offsetHeight*(scaleH-1)/2+'px)' +
                                        'scaleX('+scaleW*0.8+')' +
                                        'scaleY('+scaleW*0.8+')';
        }else{/*竖屏*/
            console.log('竖屏');
                ss.webkitTransform =
                    ss.MsTransform =
                        ss.msTransform =
                            ss.MozTransform =
                                ss.OTransform =
                                    ss.transform=
                                        'translateX('+scales[i].offsetWidth*(scaleW-1)/2+'px)' +
                                        'translateY('+scales[i].offsetHeight*(scaleH-1)/2+'px)' +
                                        'scaleX('+scaleW+')' +
                                        'scaleY('+scaleW+')';
        }
    }
    /*获取福卡数量*/
    qp.cfg.jsonUrl= 'http://10.0.0.8:8000/server/?cb=?';
    window.onload = function(){
        /*获取openid*/
        /*var openid = qp.get(openid);*/
        var openid = 'oIj9xuNTDPJIhH56WkAEA2uajM7o';
        /*获取微信名和头像*/
        if (openid) {
            qp.json.get({
                cls:'card',
                act:'count',
                openid:openid
            },function(data){
                if (data.total && data.rows.length >= 4){
                    $('.card-num-zun').text(data['rows'][0]['LotteryCount']);
                    $('.card-num-yao').text(data['rows'][1]['LotteryCount']);
                    $('.card-num-ding').text(data['rows'][2]['LotteryCount']);
                    $('.card-num-shang').text(data['rows'][3]['LotteryCount']);
                }
            })
        }
    };
    /*$('#card-QRCode').on('click',function(){
        qp.bs.showModal('二维码','<img src="img/card/erweima.png" style="width:100%;">')
    });*/

</script>
</body>
</html>